<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo_list</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="dist/style/weui.min.css">
    <link rel="stylesheet" href="css/meixian_list.css">
    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/meixian_list.js"></script>
</head>
<body>
<div id="categoryBody" class="category-viewport">
    <div id="rootList" class="mx_category_tab">
        <div id="category8">
            <ul id="category7">
                <li class="cur"><a  href="javascript:void(0);">烧烤系列</a></li>
                <li class=""><a href="javascript:void(0);">肉禽海鲜</a></li>
                <li class=""><a href="javascript:void(0);">粮油副食</a></li>
                <!--以下为重复行-->
                <li class=""><a href="javascript:void(0);">条目3</a></li>
                <li class=""><a href="javascript:void(0);">条目4</a></li>
                <li class=""><a href="javascript:void(0);">条目5</a></li>
                <li class=""><a href="javascript:void(0);">条目6</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
            </ul>
        </div>
    </div>
    <div class="mx_category_content">
        <div id="branchScroll">
            <ul id="branchList">
                <li class="mx_category_div cur">
                    <ul class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>
                    </ul>
                    <!--以下为重复版块-->
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                    <div class="cata_part">
                        <h4>
                            <em>串类</em>
                            <a href="#">查看全部></a>
                        </h4>
                        <ul class="mx_category_style">
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                            <li>
                                <a  href="#">
                                    <img src="images/list/test_goods1.gif" alt="">
                                    <span>飞机</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <div class="mx_category_div">
                    <h5>this is test text</h5>
                </div>
            </ul>

        </div>
    </div>
</div>

<script type="text/javascript" src="assets/js/zepto.js"></script>
<script src="assets/js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/template.js" type="text/javascript" charset="utf-8"></script>
<!--template模板-->
<script id="test" type="text/html">
    {{if isAdmin}}
        {{each list as value i}}
        <li>{{value}}</li>
        {{/each}}
    {{/if}}
</script>
<style>
    #branchList {
        position: relative;
        width: 225px;
        height: 600px;
        overflow: hidden;
        -ms-touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }
    .mx_category_div.cur {
        position: absolute;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }
</style>
<script>
$(function(){
    //滚轮事件


    var myScroll;
    loaded();
    function loaded () {
        myScroll = new IScroll('#branchList');
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);


})
</script>
</body>
</html>